define([
	"text!./scrollbox_widget.html",
  "../../service",
  "../../utils/i18n",
  "../../assets/vendor/jquery-scrollbox/jquery.scrollbox"
	],function(sourceHTML,api, i18n){

		var widget = avalon.ui.scrollboxwidget = function(element, data, vmodels){
  	

	    	var vmodel = avalon.define(data.scrollboxwidgetId, function(vm){
		      vm.results = {};
		      vm.isAjax = true;

		      vm.collections = [];

	    		vm.params = {
			            type: "",//"album",
			            method: null,//api.getAlbum,
			            query:{
			                queryString: [],
			                order: null
			            }
			      };
			      vm.pager = {
		          currentPage: vm.currentPage || 1,
		          perPages: vm.perPages ||  8,
		          totalItems: vm.totalItems || 150,
		          showJumper: false,
		          alwaysShowNext: true, //@config {Boolean} 总是显示向后按钮
		          alwaysShowPrev: true,
		          onJump: function(e, data) {
		              // if backend handle pages
		              //location.href = "#page=" + data.currentPage
		               vm._getAndRenderCollections(vm.params, function(res){
		                  vm.pager.currentPage = data.currentPage;
		                });
		          }

		      	}

		      	vm.perPages = 8;
		    	_.merge(vm, data.scrollboxwidgetOptions);
		    	// vm.$skipArray = ["collections"];
		    	vm.$skipArray = ["pager","params","results","collections"]

		    	vm._getAndRenderCollections = function(query,cb){

			          api.getItems(avalon.mix(vmodel.params, {query:query}),function(res){
			          
			                vm.results = res;

			                vm.collections = res.collections;
			                    
			                //stub  or use querystring.
			                if(vm.collections.length > vm.size){
			                  vm.collections = vm.collections.slice(0,vm.size);
			                }
			                
			                vm.pager.totalItems = vm.results.total;

			                element.innerHTML = sourceHTML;

			                avalon.scan(element, [vmodel].concat(vmodels));
			                if(cb){
			                  cb(res);
			                }
			            
			              })
			        }
			    vm.btnclick=function(e,dir){
			    	 var which;
			          which = $(e[1]).attr('data-target');
			          return $(which).trigger(dir);
			    }
	  			vm.$init = function(){


					 if(vm.isAjax){

			          vm.params.query.queryString.push("size="+vm.size);
			          
			          vm._getAndRenderCollections(vm.params);
			          
			        } else  {
			          // input a array results. 

			            vm.collections = vm.results.collections;

			            vm.pager.totalItems = vm.results.collections.total;

			            element.innerHTML = sourceHTML;

			            avalon.scan(element, [vmodel].concat(vmodels));
			       

			        }


		       
	          
		       		$(function(){


				        if ($('.scrollbox-vert').length) {

				          $('.scrollbox-vert').scrollbox({
				            direction: "h",
				            autoPlay: true,
				            switchItems: 1
				          });
				        }
				        if ($('.scrollbox-hor').length) {
				          $('.scrollbox-hor').scrollbox({
				            autoPlay: false,
				            switchItems: 1
				          });
				        }
				        $(document).on("click",'.scrollbox-forward',function(e) {
				          var which;
				          e.preventDefault();
				          which = $(e.currentTarget).attr('data-target');
				          return $(which).trigger('forward');
				        });
				        $(document).on("click",'.scrollbox-backward',function(e) {
				          e.preventDefault();
				          return $($(e.currentTarget).attr('data-target')).trigger('backward');
				        });
				     })
		            
		  		}
		  		vm.$remove = function(){
		  			
					element.innerHtml = element.textContent = "";
	  	
		  		}
		    });
	    	return vmodel;
	    }
	    return avalon;

})